<template>
  <div>
    <!-- 模糊查询框 -->
    <br>
    <div align="center">
      <h1>工薪系统</h1>
    </div>
    <br>
    <el-form :inline="true" :model="keyword" ref="searchForm" class="demo-form-inline" align="center">
      <el-form-item label="员工工号" prop="sId">
        <el-input size="small" clearable v-model="keyword.sId" placeholder="产品名字"></el-input>
      </el-form-item>
      <el-form-item label="员工姓名" prop="sName">
        <el-input size="small" clearable v-model="keyword.sName" placeholder="员工姓名"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="small" @click="search" icon="el-icon-search">查询</el-button>
        <el-button type="primary" plain size="small" @click="resetSearchForm('searchForm')"
                   icon="el-icon-refresh"
        >重置
        </el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="success" size="small" @click="openAddDialog" icon="el-icon-plus">添加信息</el-button>
        <el-button type="danger" size="small" @click="deleteBatch" icon="el-icon-delete">批量删除</el-button>
        <el-button type="info" size="small" @click="dialogExcelVisible = true"
                   icon="el-icon-upload2"
        >导入应用
        </el-button>
        <el-button type="warning" size="small" @click="downloadExcel"
                   icon="el-icon-download"
        >导出表格
        </el-button>

      </el-form-item>
    </el-form>

    <!-- 上传excel的对话框 -->
    <el-dialog title="上传应用Excel" :visible.sync="dialogExcelVisible" width="40%">
      <el-upload class="upload-demo" drag action="http://localhost:8080/money/money1/upload/excel"
                 accept=".xlsx,.xls" :on-success="uploadExcelSuccess" :on-error="uploadExcelError" multiple
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">只能上传.xlsx,.xls文件,且不超过500kb</div>
      </el-upload>
    </el-dialog>
    <!--  中间框  -->
    <el-table :data="alaryList" height="250" @selection-change="handleSelectionChange" border style="width: 100%">
      <el-table-column type="selection" width="55" align="center"/>
      <el-table-column prop="sId" label="员工工号" align="center">
      </el-table-column>
      <el-table-column prop="sName" label="员工姓名" align="center">
      </el-table-column>
      <el-table-column prop="sAlary" label="员工工资" align="center">
      </el-table-column>
      <el-table-column prop="sPosition" label="员工职位" align="center">
      </el-table-column>
      <el-table-column prop="sSkill" label="是否为技术人员" align="center">
        <template slot-scope="scope">
          <el-tag :type="scope.row.sSkill == 'Y' ? '' : 'danger'">
            <span>{{ scope.row.sSkill == 'Y' ? '是' : '否' }}</span>
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="sAward" label="奖励" align="center">
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="120">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit" @click="change1(scope.row)">修改</el-button>
          <el-button size="mini" type="text" icon="el-icon-delete"
                     @click="handleDelete(scope.row)"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加对话框 -->
    <el-dialog title="添加" :visible.sync="dialogAdd" width="30%">
      <el-form ref="alaryRulesForm" :model="alary" :rules="alaryRules" label-width="80px">
        <el-form-item label="员工名字" prop="sName">
          <el-input v-model="alary.sName" autocomplete="off" style="width:300px"></el-input>
        </el-form-item>
        <el-form-item label="员工工资" prop="sAlary">
          <el-input v-model="alary.sAlary" autocomplete="off" style="width:300px"></el-input>
        </el-form-item>
        <el-form-item label="员工职位" prop="sPosition">
          <el-input v-model="alary.sPosition" autocomplete="off" style="width:300px"></el-input>
        </el-form-item>
        <el-form-item label="是否技术" prop="sSkill">
          <el-radio-group v-model="alary.sSkill">
            <!--标签中间的是,对外展现的,label中的Y是表单数据,发给后端的-->
            <br>
            <el-radio label="Y">是</el-radio>
            <el-radio label="N">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="奖励" prop="sAward">
          <el-input v-model="alary.sAward" autocomplete="off" style="width:300px"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addonSubmit('alaryRulesForm')">确定</el-button>
        <el-button @click="dialogAdd = false">取消</el-button>
      </div>
    </el-dialog>

    <!-- 更新对话框 -->
    <el-dialog title="更新" :visible.sync="dialogUpdate" width="30%">
      <el-form ref="alaryRulesForm" :model="alary" :rules="alaryRules" label-width="80px">
        <el-form-item label="员工名字" prop="sName">
          <el-input v-model="alary.sName" autocomplete="off" style="width:300px"></el-input>
        </el-form-item>
        <el-form-item label="员工工资" prop="sAlary">
          <el-input v-model="alary.sAlary" autocomplete="off" style="width:300px"></el-input>
        </el-form-item>
        <el-form-item label="员工职位" prop="sPosition">
          <el-input v-model="alary.sPosition" autocomplete="off" style="width:300px"></el-input>
        </el-form-item>
        <el-form-item label="是否技术" prop="sSkill">
          <el-radio-group v-model="alary.sSkill">
            <!--标签中间的是,对外展现的,label中的Y是表单数据,发给后端的-->
            <br>
            <el-radio label="Y">是</el-radio>
            <el-radio label="N">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="奖励" prop="sAward">
          <el-input v-model="alary.sAward" autocomplete="off" style="width:300px"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="updateonSubmit('alaryRulesForm')">确定</el-button>
        <el-button @click="dialogUpdate = false">取消</el-button>
      </div>
    </el-dialog>

    <!-- 页码框 -->
    <br>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
                   :page-sizes="[5, 10, 20]" :page-size="100" align="center" layout="total,sizes,prev,pager,next,jumper"
                   :total="total"
    >
    </el-pagination>


  </div>
</template>

<script>
// 导入自己封装的api请求方法
import { getList, deleteById, delBatch, addAlary, change } from '@/api/money1'

export default {
  name: 'Money',
  data() {
    return {
      // 遮罩层
      loading: true,
      alaryList: [],
      pageNum: 1,
      pageSize: 5,
      currentPage: 1,
      total: 0,
      keyword: {
        sName: null,
        sId: null
      },
      ids: [],
      title: '',
      dialogAdd: false,
      dialogUpdate: false,
      dialogExcelVisible: false,
      // downloadExcel: false,
      alary: {
        sId: null,
        sName: null,
        sAlary: null,
        sPosition: null,
        sSkill: null,
        sAward: null
      },
      alaryRules: {
        sName: [
          { required: true, message: '员工名字不能为空', trigger: 'blur' }
        ],
        sAlary: [
          { required: true, message: '员工工资不能为空', trigger: 'blur' }
        ],
        sPosition: [
          { required: true, message: '员工职位不能为空', trigger: 'blur' }
        ],
        sSkill: [
          { required: true, message: '是否为技术人员不能为空', trigger: 'blur' }
        ],
        sAward: [
          { required: true, message: '奖励不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    fetchData() {
      // 组装查询参数
      let params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        sId: this.keyword.sId,
        sName: this.keyword.sName

      }
      // getList是api/type.js中自己
      getList(params).then(res => {
        let pageInfo = res.data
        // console.log("pageInfo",pageInfo)
        this.loading = false
        console.log(res.data)
        this.alaryList = res.data.list
        this.total = pageInfo.total
      })
    },// 多选框选中数据
    handleSelectionChange(selectionRowArr) {
      this.ids = []
      // console.log(selectionRowArr)
      for (let i = 0; i < selectionRowArr.length; i++) {
        this.ids.push(selectionRowArr[i].sId)
      }
      // console.log("ids",this.ids)
    },
    //页面大小改变时触发
    handleSizeChange(val) {
      this.pageSize = val
      this.fetchData()
    },
    //当前页码改变时触发
    handleCurrentChange(val) {
      this.pageNum = val
      this.fetchData()
    },
    // 模糊搜索
    search() {
      this.fetchData()
    },
    // 重置表单
    resetSearchForm(formName) {
      this.$refs[formName].resetFields()
      this.fetchData()
    },
    // 根据id删除
    handleDelete(row) {
      //console.log(row.productId)
      this.$confirm('是否确认删除单位编号为' + '\'' + row.sId + '\'' + '的数据项？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let params = {
          id: row.sId
        }
        deleteById(params).then(res => {
          if (res.code == 20000) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.fetchData()
          }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '删除失败'
          })
        })
      })
    },
    // 批量删除
    deleteBatch() {
      this.$confirm('是否确认删除单位编号为[' + this.ids + ']的数据项？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let idStr = this.ids.join(',')
        console.log('idStr', idStr)
        let params = {
          ids: this.ids.join(',')
        }
        delBatch(params).then(res => {
          if (res.code == 20000) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.fetchData()
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 打开添加对话框
    openAddDialog() {
      this.dialogAdd = true
      console.log(this.$refs)
      this.title = '添加'
    },
    // 添加计量单位
    addonSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 此处执行添加...
          console.log(this.alary)
          addAlary(this.alary).then(res => {
            this.$message({
              type: 'success',
              message: '添加成功!'
            })
            this.dialogAdd = false
            this.fetchData()
            this.$refs[formName].resetFields()
          })
        } else {
          console.log('error submit!!')
          return false
        }
        this.dialogAdd = false
      })

    },
    // 打开更新对话框
    change1(row) {
      this.title = '更新'
      this.dialogUpdate = true
      this.alary.sName = row.sName
      this.alary.sAlary = row.sAlary
      this.alary.sPosition = row.sPosition
      this.alary.sSkill = row.sSkill
      this.alary.sAward = row.sAward
      this.alary.sId = row.sId
      console.log(row.sId)
    },
    // 更改
    updateonSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // console.log(this.alary)
          change(this.alary).then(res => {
            this.$message({
              type: 'success',
              message: '修改成功!'

            })
            this.dialogUpdate = false
            this.fetchData()
            this.$refs[formName].resetFields()
          })
        } else {
          console.log('error submit!!')
          this.dialogUpdate = false
          return false
        }

      })
    },
    uploadExcelSuccess() {
      this.$message({
        type: 'success',
        message: '上传成功'
      })
      this.dialogExcelVisible = false
      this.fetchData()
    },
    uploadExcelError(err) {
      this.$message({
        type: 'error',
        message: err
      })
    },
    //文件下载
    downloadExcel() {
      this.$confirm('确定要导出数据吗？', '信息', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        window.location.href = 'http://localhost:8080/money/money1/download/excel'
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消导出数据'
        })
      })
    }

  },
  // 生命周期钩子函数(vue对象创建完,自动调用该方法)
  created() {
    this.fetchData()
  }

}
</script>

<style scoped lang="scss"></style>
